/* global React */
// GT7 League site header — wordmark, primary nav, season selector.
function SiteHeader({ tab, setTab }) {
  const tabs = ['This Week', 'Setup', 'Generator', 'Vote', 'Catalog', 'Standings', 'Results', 'Season'];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20,
      height: 'auto',
      minHeight: 'var(--header-h)',
      display: 'flex', alignItems: 'center', gap: '20px',
      padding: '0 20px',
      background: 'rgba(10,13,18,0.82)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      {/* Wordmark */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', padding: '4px 9px', background: 'var(--brand)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '15px', letterSpacing: '.04em', borderRadius: 'var(--radius-xs)' }}>GT7</span>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '15px', letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--text-strong)' }}>League</span>
      </div>

      {/* Nav */}
      <nav style={{
        display: 'flex',
        gap: '2px',
        flex: '1 1 auto',
        minWidth: 0,
        overflowX: 'auto',
        overflowY: 'hidden',
        WebkitOverflowScrolling: 'touch',
      }}>
        {tabs.map(t => {
          const active = t === tab;
          return (
            <button key={t} onClick={() => setTab(t)} style={{
              position: 'relative',
              flex: '0 0 auto',
              background: 'transparent',
              border: 'none',
              cursor: 'pointer',
              height: 'var(--header-h)',
              padding: '0 12px',
              whiteSpace: 'nowrap',
              fontFamily: 'var(--font-display)',
              fontSize: '13px',
              fontWeight: 600,
              letterSpacing: '.06em',
              textTransform: 'uppercase',
              color: active ? 'var(--text-strong)' : 'var(--text-faint)',
              transition: 'color 120ms',
            }}>
              {t}
              {active && <span style={{ position: 'absolute', left: 12, right: 12, bottom: 0, height: 2, background: 'var(--brand)', boxShadow: 'var(--glow-brand)' }} />}
            </button>
          );
        })}
      </nav>

      <div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-muted)' }}>{window.GT7DATA.season}</span>
        <div style={{ width: 34, height: 34, borderRadius: 'var(--radius-xs)', border: '2px solid var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-strong)', fontSize: 14 }}>7</div>
      </div>
    </header>
  );
}
window.SiteHeader = SiteHeader;